package com.miui.theme.custom.screen

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.miui.theme.custom.components.AppTopAppBar
import com.miui.theme.custom.navigation.AppScreen
import com.miui.theme.custom.navigation.currentComposeNavigator
import com.miui.theme.custom.viewmodel.LoginState
import com.miui.theme.custom.viewmodel.LoginViewModel
import org.koin.androidx.compose.koinViewModel

@Composable
fun LoginScreen(viewModel: LoginViewModel = koinViewModel()) {
    val navigator = currentComposeNavigator
    val loginState by viewModel.loginState.collectAsState()
    val config by viewModel.configFlow.collectAsState(initial = null)

    LaunchedEffect(loginState) {
        if (loginState == LoginState.Success) {
            navigator.navigateAndClearBackStack(AppScreen.Main) //
        }
    }

    Scaffold( // 使用 Scaffold 统一结构
        topBar = {
            AppTopAppBar(
                title = "连接到数据库", //
                actions = {
                    TextButton(onClick = { navigator.navigate(AppScreen.Config) }) { //
                        Text("配置")
                    }
                }
            )
        }
    ) { padding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(padding)
                .padding(horizontal = 32.dp), // 增加左右边距
            verticalArrangement = Arrangement.Center, // 垂直居中
            horizontalAlignment = Alignment.CenterHorizontally // 水平居中
        ) {
            Text(
                text = "当前配置: ${config?.host ?: "未配置"}", //
                style = MaterialTheme.typography.titleMedium,
                textAlign = TextAlign.Center
            )

            if (config == null || config?.host.isNullOrEmpty() || config?.host == "192.168.1.100") {
                Text(
                    text = "请首先点击右上角 '配置' 按钮设置您的数据库信息。",
                    style = MaterialTheme.typography.bodySmall,
                    textAlign = TextAlign.Center,
                    color = MaterialTheme.colorScheme.onSurfaceVariant,
                    modifier = Modifier.padding(top = 8.dp)
                )
            }

            Spacer(modifier = Modifier.height(32.dp)) // 增大间距

            // 根据状态显示不同内容
            when (loginState) {
                LoginState.Loading -> CircularProgressIndicator(modifier = Modifier.size(48.dp)) //
                else -> {
                    Button(
                        onClick = { viewModel.connect() }, //
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(48.dp),
                        enabled = config != null
                    ) {
                        Text("连接", style = MaterialTheme.typography.titleSmall)
                    }

                    if (loginState == LoginState.Error) { //
                        Spacer(modifier = Modifier.height(16.dp))
                        Text(
                            "连接失败！请检查配置或网络。", //
                            color = MaterialTheme.colorScheme.error, //
                            textAlign = TextAlign.Center
                        )
                    }
                }
            }
        }
    }
}